// In App.js in a new project

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
// 路由导入
import Main from './Views/Main/Main';
import Find from './Views/Find/Find';
import My from './Views/My/My';
import Message from './Views/Message/Message';
import Login from './Views/Login/Login';
import Order from './Views/Order/Order';

// 组件拆分
function HomeScreen({ route, navigation }) {
  // const { itemId } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      {/* <Text>{itemId}</Text> */}
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details', {
          // itemId: 0,
          otherParam: 'anything you want here',
        })}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  // const { itemId, otherParam } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      {/* <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text> */}
      {/* 为当前页不操作 */}
      <Button
        title="Go to Details... again"
        onPress={() => navigation.navigate('Details')}
      />
      {/* 为当前页继续跳转 */}
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
      {/* 跳转到指定路由 */}
      <Button
        title="Go to Home"
        onPress={() => navigation.navigate('Home', {
          itemId: 86,
          otherParam: 'anything you want here',
        })}
      />
      {/* 跳转到指定路由 */}
      <Button
        title="Go to Home"
        onPress={() => navigation.navigate('My', {
          itemId: 86,
          otherParam: 'anything you want here',
        })}
      />
      {/* 返回上一级路由 */}
      <Button
        title="Go back"
        onPress={() => navigation.goBack()}
      />
      {/* 关闭所有屏幕以返回到第一个屏幕 */}
      <Button
        title="Go back to first screen in stack"
        onPress={() => navigation.popToTop()}
      />
    </View>
  );
}

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="Main" initialRouteParams="false">
        {/* <Tab.Screen name="Home" component={HomeScreen}></Tab.Screen> */}
        {/* <Tab.Screen name="Details" component={DetailsScreen}></Tab.Screen> */}
        <Tab.Screen name="Main" component={Main}></Tab.Screen>
        <Tab.Screen name="Find" component={Find}></Tab.Screen>
        <Tab.Screen name="Order" component={Order}></Tab.Screen>
        <Tab.Screen name="Message" component={Message}></Tab.Screen>
        <Tab.Screen name="My" component={My}></Tab.Screen>
      </Tab.Navigator>
    </NavigationContainer>
  );
}


export default App;